<template>
  <view>
    <cu-custom bgColor="bg-gradual-pink" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">告警记录</block>
    </cu-custom>

    <view class="wrap">
      <!-- 查询系列 -->
      <view class="u-flex u-row-center">
        <u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="false">
          <u-dropdown-item @change="change" title="等级" v-model="level" :options="levels"></u-dropdown-item>
          <u-dropdown-item
            @change="change"
            title="状态"
            v-model="processStatus"
            :options="processStates"
          ></u-dropdown-item>
        </u-dropdown>
      </view>

      <view class="top">
        <view class="u-flex u-flex-nowrap picker-border">
          <view
            @tap="calendarShow = true"
            class="u-m-l-40 u-font-30"
            style="margin-right: auto; justify-content: flex-start"
          >
            {{ startInput ? startInput : startNowTime }}
          </view>
          <view style="justify-content: center">-</view>
          <view
            @tap="calendarShow = true"
            class="u-m-r-40 u-font-30"
            style="margin-left: auto; justify-content: flex-end"
          >
            {{ endInput ? endInput : endNowTime }}
          </view>
        </view>

        <!-- 日历选择 -->
        <u-calendar
          v-model="calendarShow"
          mode="range"
          @change="calendarChange"
          active-bg-color="#ec008c"
          range-color="#ec008c"
          range-bg-color="rgba(25,190,107, 0.13)"
          btn-type="success"
          :default-start-date="startNowDate"
          :default-end-date="endNowDate"
        ></u-calendar>
      </view>

      <!-- 查询记录列表 -->
      <scroll-view scroll-y class="sv" :style="{ height: navHeight + 'px' }" @scrolltolower="reachBottom">
        <view class="page-box">
          <u-swipe-action v-for="(item, index) in dataList" :key="item.id" :index="index">
            <view class="order u-border-bottom">
              <view class="order-item">
                <view class="left title-wrap">
                  <view class="title">{{ item.serverName }}</view>

                  <view class="content">
                    <view v-if="item.level === 0" class="orange-type">等级: warn</view>
                    <view v-else-if="item.level === 1" class="red-type">等级: error</view>
                    <view v-if="item.processStatus === 0" class="red-type">处理状态: 未处理</view>
                    <view v-else-if="item.processStatus === 1" class="orange-type">处理状态: 处理中</view>
                    <view v-else-if="item.processStatus === 2" class="green-type">处理状态: 已关闭</view>
                    <view class="type">告警时间: {{ item.createTime }}</view>
                    <view class="other-type">告警消息: {{ item.message }}</view>
                    <view class="other-type">异常信息: {{ item.exception }}</view>
                    <view v-if="item.remark" class="other-type">备注: {{ item.remark }}</view>
                  </view>
                </view>
                <view class="right title-wrap"></view>
              </view>
            </view>
          </u-swipe-action>
          <u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
        </view>
      </scroll-view>
    </view>

    <!-- 确认删除框 -->
    <Confirm ref="Confirm"></Confirm>
  </view>
</template>

<script>
import Confirm from '@/components/confirm.vue'
import store from '@/store'

export default {
  data() {
    return {
      mask: true,
      activeColor: '#ec008c',
      loadStatus: 'loadmore',
      levels: store.getters.alarmRecordLevels,
      processStates: store.getters.alarmRecordProcessStatus,
      level: null,
      processStatus: null,
      calendarShow: false,
      startInput: '',
      endInput: '',
      startNowTime: '',
      endNowTime: '',
      startNowDate: '',
      endNowDate: '',
      pH: 0, //窗口高度
      navHeight: 0, //元素的所需高度
      current: 1,
      size: 10,
      dataList: []
    }
  },
  components: {
    Confirm
  },
  onUnload() {},
  async onLoad() {
    // 刷新监听
    uni.$on('refreshAlarmRecordPage', () => {
      // 执行刷新方法
      this.change()
    })

    this.getNowTime()
    this.change()
  },
  onReady() {
    // 动态获取剩余的高度
    var that = this
    uni.getSystemInfo({
      success: function (res) {
        that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
        let titleH = uni.createSelectorQuery().select('.sv') //想要获取高度的元素名（class/id）
        titleH
          .boundingClientRect((data) => {
            let pH = that._data.pH
            that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          })
          .exec()
      }
    })
  },
  methods: {
    /**
     * 获取当前 年月日
     */
    async getNowTime() {
      var dt = new Date()
      let year = dt.getFullYear()
      let month = (dt.getMonth() + 1).toString().padStart(2, '0')
      let date = dt.getDate().toString().padStart(2, '0')
      this.startNowTime = `${year}-${month}-01 00:00:00`
      this.endNowTime = `${year}-${month}-${date} 23:59:59`
      this.startNowDate = `${year}-${month}-01`
      this.endNowDate = `${year}-${month}-${date}`
    },
    /**
     * 日历改变事件
     * @param {Object} e
     */
    calendarChange(e) {
      this.startNowDate = e.startDate
      this.endNowDate = e.endDate
      this.startInput = e.startDate + ' 00:00:00'
      this.endInput = e.endDate + ' 23:59:59'

      this.change()
    },
    // 页面数据
    async getOrderList(current) {
      let startInput = this.startInput ? this.startInput : this.startNowTime
      let endInput = this.endInput ? this.endInput : this.endNowTime

      // 获取数据
      const params = {
        level: this.level,
        processStatus: this.processStatus,
        startTime: startInput,
        endTime: endInput,
        currentPage: current,
        size: this.size
      }

      const res = await this.$u.api.getAlarmRecordPageData(params)
      let data = JSON.parse(JSON.stringify(res.data))

      // 无数据 nomore 页数减回来
      if (data.length == 0) {
        this.loadStatus = 'nomore'
        this.current = --this.current
        return
      }

      if (this.dataList.length == 0) {
        // 赋值
        this.dataList = res.data
      } else {
        // 下拉追加
        data.forEach((item) => {
          this.dataList.push(item)
        })
      }
      this.loadStatus = 'loadmore'
    },
    reachBottom() {
      // 加这个判断 为了防止重复下拉
      if (this.loadStatus != 'loading') {
        // 下拉增加页数
        this.current = ++this.current

        this.loadStatus = 'loading'
        setTimeout(() => {
          this.getOrderList(this.current)
        }, 1200)
      }
    },
    change() {
      // 列表重新查询
      this.dataList = []
      this.current = 1
      this.getOrderList(this.current)
    },
    /**
     * 更新处理状态
     * @param {Object} index1 按钮下标
     * @param {Object} index 数组下标
     */
    click(index1, index) {
      let id = this.dataList[index].id
      let params = {
        id: id,
        processStatus: this.dataList[index].processStatus
      }

      // 更新处理状态
      if (index1 == 0) {
        // 认领 => 处理中
        params.processStatus = 1
        this.$u.api.upAlarmRecord(params).then((res) => {
          this.$u.toast('认领成功')
          this.change()
        })
      } else if (index1 == 1) {
        // 关闭 => 已关闭
        params.processStatus = 2
        this.$u.api.upAlarmRecord(params).then((res) => {
          this.$u.toast('关闭成功')
          this.change()
        })
      } else if (index1 == 2) {
        // 删除
        this.$refs['Confirm'].open({
          title: '提示',
          content: `是否确定删除?`,
          callback: (action) => {
            if (action == 'sumbit') {
              // 删除记录
              this.$u.api.delAlarmRecord(id).then((res) => {
                this.$u.toast('删除成功')
                this.change()
              })
            }
          }
        })
      } else if (index1 == 3) {
        // 跳转备注页面
        let id = this.dataList[index].id
        let remark = this.dataList[index].remark

        if (remark) {
          this.$u.route({
            type: 'navigateTo',
            url: `/pages/index/alarm/alarm_remark?id=${id}&remark=${remark}`
          })
        } else {
          this.$u.route({
            type: 'navigateTo',
            url: `/pages/index/alarm/alarm_remark?id=${id}`
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
}

.picker-border {
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
}

.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 0 20rpx 0 20rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
	display: flex;

  .order-item {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }
    }

    .content {
      .type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: $u-type-primary;
      }

      .red-type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: #dd524d;
      }

      .orange-type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: #f37b1d;
      }

      .green-type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: #19be6b;
      }

      .other-type {
        margin: 6rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }
    }

    .right {
      text-align: right;

      .expenditure-type {
        margin: 0 20rpx 0 0;
        font-size: 50rpx;
        line-height: 145rpx;
        color: $u-type-error;
      }

      .income-type {
        margin: 0 20rpx 0 0;
        font-size: 50rpx;
        line-height: 145rpx;
        color: $u-type-success;
      }
    }
  }
}

.swipe-right-item-orange {
  margin: 25rpx auto;
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  float: left;
  height: 340rpx;

  width: 150rpx;
  background-color: #f37b1d;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}

.swipe-right-item-red {
  margin: 25rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 340rpx;

  width: 150rpx;
  background-color: #dd524d;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}

.swipe-right-item-green {
  margin: 25rpx auto;
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  float: left;
  height: 340rpx;

  width: 150rpx;
  background-color: #19be6b;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}

.swipe-right-item-gray {
  margin: 25rpx auto;
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  float: left;
  height: 340rpx;

  width: 150rpx;
  background-color: #8799a3;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}
</style>
